<template>
    <el-form ref="form" :model="data" :rules="rules" label-width="100px">
        <el-form-item label="维修类型">
            <el-radio-group v-model="data.type">
            <el-radio :label="1">设备</el-radio>
            <el-radio :label="2">物资</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="所属客户" prop="customer_id">
            <el-select v-model.trim="data.customer_id" placeholder="请选择所属客户"  @change="select_customer" clearable  filterable  class="filter-item" >
                <el-option  v-for="(customer,index) in customer_list"  :key="index" :value="customer.id" :label="customer.name"></el-option>
            </el-select>
        </el-form-item>
  
        <el-form-item label="所属项目" prop="project_id">
            <el-select v-model.trim="data.project_id" placeholder="请选择所属项目"  clearable  filterable  class="filter-item" >
                <el-option  v-for="(project,index) in project_list"  :key="index" :value="project.id" :label="project.title"></el-option>
            </el-select>
        </el-form-item>
  
        <el-form-item label="设备分类" prop="cate_id">
            <el-cascader
                v-model="data.cate_id"
                @change="select_category"
                :options="category_list" 
            >
            </el-cascader>
        </el-form-item>
  
       
        <el-form-item label="设备名称" prop="equipment_id">
            <el-select v-model.trim="data.equipment_id" placeholder="请选择设备名称" clearable  filterable  class="filter-item" @change="select_equipment">
                <el-option  v-for="(equipment,index) in equipment_list"  :key="index" :value="equipment.id" :label="equipment.name"></el-option>
            </el-select>
        </el-form-item>
  
        <el-form-item label="维修人员" prop="repair_uid">
            <el-select v-model.trim="data.repair_uid" placeholder="请选择维保人员" clearable  filterable  class="filter-item" @change="select_admin">
                <el-option  v-for="(admin,index) in admin_list"  :key="index" :value="admin.id" :label="admin.nickname"></el-option>
            </el-select>
        </el-form-item>
  
        <el-form-item label="派工地址" prop="province">
            <el-cascader
            size="large"
            :options="address_options"
            clearable
            filterable
            placeholder="选择地区"
            style="width: 250px; margin-right: 10px"
            v-model="selectedOptions"
            @change="handleAddressChange"
            >
            </el-cascader>
        </el-form-item>
  
        <el-form-item label="详细地址" prop="address">
            <el-input v-model.trim="data.address" placeholder="请填写设备详细地址" />
        </el-form-item>
  
        <el-form-item label="维修原因" prop="repair_reason">
            <el-input  type="textarea" v-model.trim="data.repair_reason" :rows="5" placeholder="请填写维修原因" />
        </el-form-item>
  
        <el-form-item label="维修图片" prop="repair_images">
          <el-upload
            :action="$store.state.settings.file_upload_url"
            :headers="headerObj"
            multiple
            list-type="picture-card"
            :file-list="data.repair_images"
            accept="image/png, image/jpeg, image/gif, image/jpg"
            :on-success="handlerepair_imagesSuccess"
            :on-remove="handledrepair_imagesRemove"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
      </el-form-item>
  
  
        <el-form-item>
          <el-button type="primary" icon="el-icon-check" :disabled="$store.state.settings.ajaxButton" @click="submit">提交</el-button>
        </el-form-item>
    </el-form>
   
  </template>
  
  <script>
  import { getToken } from '@/utils/auth'
  import { create,init_data } from '@/api/maintenance_plan.js' // api接口
  import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode,
  } from "element-china-area-data";
  
  export default {
    name: 'equipmentCreate',
    components: { },
    
    props: {
      item: {
        type: Object,
        default: () => {
          return {};
        },
      },
      customer_list: {
        type: Array,
        default: () => {
          return []
        }
      },
      admin_list: {
        type: Array,
        default: () => {
          return []
        }
      },
      category_list: {
        type: Array,
        default: () => {
          return []
        }
      },
    },
    data() {
      return {
        loading:false,
        dialogVisible:false,
        headerObj: {
              'Authorization': 'Bearer ' + getToken()
          },
        rules: {
             customer_id: [ 
                  { required: true, message: "请选择所属客户", trigger: "blur" },
              ], 
              project_id: [ 
                  { required: true, message: "请选择所属项目", trigger: "blur" },
              ], 
              cate_id: [ 
                  { required: true, message: "请选择设备分类", trigger: "blur" },
              ], 
              project_id: [ 
                  { required: true, message: "请选择设备所属项目", trigger: "blur" },
              ],
  
  
        },
        address_options: regionDataPlus,
        selectedOptions: [],
        project_list: [],
        equipment_list : [],
        data: {
            type:1,
            customer_id:'',
            project_id:'',
            repair_uid:"",
            repair_name:"", // 新增维修人员姓名
            province:"",
            city:"",
            area:"",
            equipment_id:'',
            equipment_name:"", // 新增设备名称
            address:"",
            cate_id:"",
            repair_reason:"",
            repair_images:[],
            repair_imagesfileList:[],
        }
      }
    },
    created() {
    },
    methods: {
  
      //多图移除
      handledrepair_imagesRemove(file, fileList) {
        const that = this;
        let index = this.data.repair_imagesfileList.findIndex(
          (item) => item.url == file.url
        ); // 要删除的数组下标
        if (index != -1) {
          that.data.repair_imagesfileList.splice(index, 1);
          that.data.repair_images.splice(index, 1);
        }
      },
      //多图上传成功回调
      handlerepair_imagesSuccess(response, file, fileList) {
        this.$store.commit("settings/SET_AJAX_BUTTON", false);
        if (!response.data.src) {
          this.data.repair_imagesfileList = [];
          return this.$message.error(response.msg);
        }
        this.data.repair_images.push(response.data.src);
      },
      //多图上传前回调
      beforerepair_imagesUpload(file) {
        this.$store.commit("settings/SET_AJAX_BUTTON", true);
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        if (!isJPG && !isPNG) {
          this.$message.error("上传头像图片只能是 JPG 、PNG格式!");
        }
      },
        select_customer(value) {
          init_data({customer_id:value}).then(response => {
              this.project_list = response.data.projects;
          })
        },
       
        select_category(value) {
          init_data({cate_id:value}).then(response => {
              this.equipment_list = response.data.equipments;
          })
        },
  
        // 选择设备
        select_equipment(value) {
          const selectedEquipment = this.equipment_list.find(item => item.id === value);
          if (selectedEquipment) {
            this.data.equipment_name = selectedEquipment.name;
          } else {
            this.data.equipment_name = "";
          }
        },
  
        // 选择维修人员
        select_admin(value) {
          const selectedAdmin = this.admin_list.find(item => item.id === value);
          if (selectedAdmin) {
            this.data.repair_name = selectedAdmin.nickname;
          } else {
            this.data.repair_name = "";
          }
        },
  
        handleAddressChange(value) {
            let province = CodeToText[value[0]],
            city = CodeToText[value[1]],
            area = CodeToText[value[2]];
            this.data.province = province != "全部" ? province : "";
            this.data.city = city != "全部" ? city : "";
            this.data.area = area != "全部" ? area : "";
        },
      submit() {
        const thiz = this
  
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false
          }
          create(this.data).then(response => {
            this.$store.commit('settings/SET_AJAX_BUTTON', true);
            this.$message({
              message: '添加成功',
              type: 'success',
              duration: 1500,
              onClose() {
                if (thiz.$refs.form !== undefined) {
                  thiz.$refs.form.resetFields()
                }
                thiz.item.dialogVisible = false
              }
            })
          })
        })
      }
    }
  }
  </script>